Rendering Lists

Firat Atalay

8 min read

·

Jul 23, 2023

9

1

Rendering lists is one of the most common things that we do in basically all React applications. You will probably do it like 100 times throughout this lectures and so let’s now learn how to render lists in React. But first of all, what do we actually mean by rendering lists?

Well, basically rendering a list is when we have an array and we want to create one component for each element of the array.

So for example, here we have all starter data, remember? So here we have an array of these objects where each object is one pizza. And so as you can imagine, now we want to basically render this list. So basically we want to take this array, and for each of these pizza objects, we want to automatically create one pizza component here in our user interface. So instead of calling or of using here the pizza component manually one by one, we want to do it all at once dynamically.

So if we have like four pizzas in the array, then we want four components to be rendered. But if we have like six or 10, then we want 10 components to show up here in our app. Okay, so let’s now learn how to do this.

Now, the beauty of React is that for many things, all we need really is the JavaScript knowledge that we already have. So for example, for rendering lists, there’s nothing new about React that we need to learn. So it doesn’t give us like a list element that we can use or something like this. All we need is the JavaScript knowledge that we already have. And in this case, all we need is the map method. So let me show you how after all this talk.

So let’s create a new div here and later we will convert this to an actual list element but let’s just start out with any element here. It doesn’t really matter which one. And for starters, let’s also comment out this code right here and maybe you noticed here by the way, that a comment in JSX is simply again entering JavaScript mode so with these curly braces and then this is just a JavaScript comment. So this is one of the rules of JSX that was actually in one of the slides or actually in the only slide in the previous lecture.

So if you read that, then you’re already familiar with this. But anyway, let’s now render our pizza list. Let’s remember, yeah, it’s called pizza data. So let’s enter JavaScript mode here and then let’s take our pizza data, which remember is just an array. And then let’s map over it. So at map, we basically loop over this array and create a brand new array. So in this pizza data, each element is a pizza. So let’s do this and what we want in this new array, so in the new array that will be the result of map is for each pizza, a pizza component. And now we can simply pass all of these props in dynamically here. Let’s first close it like this. So we can now say pizza. and I think it is name, but let’s check. Yeah, so we have name, ingredients, price, photo data and even this other property.

So if I give it a save right now, we should already see the six components over there and indeed, beautiful. There they are. They’re missing here the image and the prices I guess. But in principle, it’s already working. So you see here that we now get these console.logs here for each of the pizzas, exactly what the names we have here. And so now we are effectively already rendering a list. So a list based on this pizza data. Now we could keep going here and basically add another property now for the photo name for example. So we can do pizza.photoname and so on and so forth.

But usually this is not how we do it. Usually what we do is to pass in the entire object into the more specific component, so that’s pizza in this case, and then inside of that component, we would then take the information that we want out of the object. So let’s now change the way we pass props into this pizza and simply pass pizza and let’s maybe say pizza object just to make it slightly less confusing and then or JavaScript mode and then the current pizza object. All right and now it all breaks here because we need to adapt, of course, our pizza. So now here we have props.pizzaobject.photoname, right?

And so let’s paste this here everywhere and here and here and here. And a bit later we will make our lives a bit easier with some additional techniques. But for now, let’s roll with this. And there you have it. There you have a list of all the pizzas based on our pizza data array. Let’s just just get rid of this, and of course, if we now remove something from here, then that last pizza over there is going to disappear. You see but let’s put it back and yeah, there it is. Now notice how we have like an error here in the console. So let’s scroll up a little bit and see what we get. So we have this warning saying that each child in a list should have a unique key property. So basically what this means is that each time we render a list like this. Where is it? Yeah so each time we render a list with the map method, each of the items that gets rendered needs a unique key property. So key is basically a prop that is internal to React, which it needs in order for some performance optimizations and for now, it’s not really important what that means as we will learn later what exactly this K property is and what it does. For now, what matters is that we pass something here that is unique to each element. So to each pizza in this case, and that is the name. So the name in this example is always unique. So we can use that one as the unique key and so then the warning here is gone.

Okay now next, what I want to do is to convert this here from a simple div to a UL, so an unordered list. And then each of these pizzas themselves should be a list element or list item, so an LI. So it’s very important that we write semantic markup like this, which many courses somehow overlook but I believe it’s quite important.

And here we are also missing an important class name to finally apply some more styling here, which is just pizzas and so this then puts the pizzas like nicely in this grid and makes this look even nicer. So I’m really happy here with this design like this. And it’s already starting to look like very familiar to what we have here, right. We have just missing this button. The text here is a bit different, and we have some special styling here when the pizza is sold out and so we will actually talk about this here pretty soon. But for now, let’s quickly review what we did in this lecture and so that is fundamentally this part right here.

So the goal was to render one pizza element for each of the objects that are inside the pizza data array. And the way we do that in React is by simply using the map method on this array, and in case you’re not entirely sure what the map method does, please go back to the the previous section where I will introduce you to all the most important array methods that we use all the time. And this one here is probably the most important. So it will create a new array, and in this array, in each position, there will be a new pizza component. And into each of these pizza components, we pass as a prop the current pizza object, right. So we then receive that here as a prop, and from there, we read all the data that we are interested in.

All right, now of course, we could also not even have this component. Let me quickly show that to you as well. So let’s copy this and well then can simply replace it here, paste that there. And then of course, we need to get rid of all this. So I’m just replacing all of them at the same time and please don’t follow this code here. So you don’t need to do this.

I just want to show you that we could have done it also without like the intermediary component. So all that matters here is that we return some JSX. So we can directly write a JSX here but usually what we do is to place that JSX in another component. So let’s go back and there we go.

Now, you might have thought maybe that here we use a for each because it sounds a bit more logical. Like maybe we wanted to render one pizza for each of these but that wouldn’t really work. Let’s try that and you see that then nothing happened.

And so that’s because here inside this UL we actually need some JSX. And the only way we get that JSX is by creating a new array. And so that’s what MAP does. So it creates a new array, which will, in this case, contain these six pizzas. And so then here we will have this array with all these pizzas and then React knows how to render that. Okay, so very, very important technique. Make sure that you memorize this nor if you don’t want to memorize, don’t worry, because you will do this dozens of time throughout the lectures.